<template>
<el-dialog class="model-detail" :append-to-body="true" :visible.sync="detail.show" width="1000px" :close-on-click-modal="false">
    <template slot="title">
        <span class="el-dialog__title">{{modelDetail.info.algorithm}}</span>
        <span class="info">
            <i class="iconfont icon-chuangjianren"></i>
            <span>{{modelDetail.info.operUser}}</span>
        </span>
        <span class="info">
            <i class="iconfont icon-shijian1"></i>
            <span>{{modelDetail.info.operTime}}</span>
        </span>
    </template>
    <el-tabs v-model="activeName">
        <el-tab-pane v-for="(item, i) in tabList" :key="i" :label="item.label" :name="item.name">
            <component :is="componentsArray[activeName]"></component>
        </el-tab-pane>
    </el-tabs>
    <span slot="footer" class="dialog-footer"></span>
</el-dialog>
</template>

<script>
import ModelReport from './report'
import ModelAssess from './assess'
import {
    mapGetters
} from 'vuex'
export default {
    name: 'ModelDetail',
    components: {
        ModelReport,
        ModelAssess
    },
    props: {
        detail: {
            type: Object
        }
    },
    computed: {
        ...mapGetters({
            modelDetail: 'common/getModelDetail'
        })
    },
    data () {
        return {
            activeName: '0',
            tabList: [{
                    name: '0',
                    label: '模型概要'
                },
                {
                    name: '1',
                    label: '评估报告'
                }
            ],
            componentsArray: [ModelReport, ModelAssess]
        }
    },
    created () {
        this.init()
    },
    methods: {
        init () {
            this.tabList.length = this.modelDetail.summary.showEvaluateReport ? 2 : 1
        }
    }
}
</script>

<style lang="less">
.model-detail {
    .el-dialog__header {
        display: flex;
    }
    .info {
        display: flex;
        align-items: center;
        font-size: 12px;

        i {
            padding-left: 20px;
            padding-right: 5px;
        }
    }

    .el-tabs__header {
        margin: 0;
    }
}
</style>
